<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>我的贴子</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/user/css/common.css">

</head>
<body>
  <div class="container">
    <header class="bar bar-nav header">
      <h1 class='title'>我的贴子</h1>
    </header>
    <!-- 中间，记录显示 -->
    <div class="mainContent" id="mainContent" onscroll="myScrollToTopFn()">
      <div class="content-wrapping">
        <input class="uid" value="${user.uid}" style="display:none">
        <div class="myIssueDiv">
          <!-- 遍历articleList -->
          <c:forEach items="${myIssueArticleList}" var="article">
	          <div class="card demo-card-header-pic">
	            <div class="card-header color-white no-border no-padding">
	              <!-- 删除记录 -->
	              <a href="javascript:;" class="deleteMyArticleBtn">X</a>
		            <input type="text" class="aid" value="${article.aid }" style="display:none;">
	              <!-- 展示记录细节，传递foundFlag和invalidFlag是因为sql语句不一样  -->
	              <a href="${pageContext.request.contextPath }/myIssue?method=showMyIssueArticleDetail&aid=${article.aid }&foundFlag=${article.foundFlag}&invalidFlag=${article.invalidFlag}">
	                <img class='card-cover' src="${pageContext.request.contextPath }/images${article.image}" style="width: 538px;height: 250px;">
	              </a>
	            </div>
	            <div class="card-content">
	              <div class="card-content-inner">
	                <a href="${pageContext.request.contextPath }/myIssue?method=showMyIssueArticleDetail&aid=${article.aid }&foundFlag=${article.foundFlag}&invalidFlag=${article.invalidFlag}"
	                  style="color: #000;">
	                  <strong>
	                    <c:set value="${article.title}" var="myTitle"></c:set>
	                    <c:choose>
	                      <c:when test="${fn:length(myTitle)>15}">
	                        <c:out value="${fn:substring(myTitle, 0 ,15) }...... "/>
	                      </c:when>
	                      <c:otherwise>
	                        <c:out value="${myTitle}"/>
	                      </c:otherwise>
	                    </c:choose>
	                  </strong>
	                  <span class="color-gray" style="float: right;">
                      <c:choose>
                        <c:when test="${article.foundFlag == 1 && article.invalidFlag == 0}"><span style="color:#DC3545;font-weight:bold;">已失效</span></c:when>
                        <c:when test="${article.foundFlag == 0 && article.invalidFlag == 1}"><span style="color:#28A745;font-weight:bold;">已找到</span></c:when>
                        <c:when test="${article.foundFlag == 1 && article.invalidFlag == 1}"><span style="color:#17A2B8;font-weight:bold;">未找到</span></c:when>
                        <c:when test="${article.foundFlag == 2 && article.invalidFlag == 2}"><span style="color:#FFC107;font-weight:bold;">提交审核中</span></c:when>
                        <c:when test="${article.foundFlag == 4 && article.invalidFlag == 4}"><span style="color:#DC3545;font-weight:bold;">虚假欺诈类信息</span></c:when>
                      </c:choose>
	                  </span>
	                </a>
	                <p>
                    <strong>
                      <c:set value="${article.detailInfo}" var="detailInfo"></c:set>
                      <c:choose>
                        <c:when test="${fn:length(detailInfo)>50}">
                          <c:out value="${fn:substring(detailInfo, 0 ,50) }...... "/>
                        </c:when>
                        <c:otherwise>
                          <c:out value="${detailInfo}"/>
                        </c:otherwise>
                      </c:choose>
                    </strong>
	                </p>
	              </div>
	            </div>
	            <div class="card-footer">
	              <span>发布于 ${article.issueTime }</span>
	              <span>
                  <c:choose>
                    <c:when test="${article.whatFlag == 0 }">寻找失主</c:when>
                    <c:when test="${article.whatFlag == 1 }">寻找失物</c:when>
                  </c:choose>
	              </span>
	            </div>
	          </div>
          </c:forEach>
        </div>
        <div class="article-end text-center" style="padding:10px;display:none;">已经到底啦～</div>
      </div>
      <!-- 提示 -->
      <div class="confirmModal" style="display:none;">
        <div class="modal-overlay modal-overlay-visible" style="height:100%;width: 571px;margin:auto;top:0;left:0;right:0;bottom:0;"></div>
        <div class="modal modal-in" style="display: block; margin-top: -57px;">
          <div class="modal-inner">
          <div class="modal-text">确定删除？</div>
          </div>
          <div class="modal-buttons ">
          <span class="modal-button cancelBtn">取消</span>
          <span class="modal-button modal-button-bold confirmBtn">确定</span>
          </div>
        </div>
      </div>
    </div><!-- end of .mainContent -->
    <!-- 底部，导航栏 -->
    <footer class="footer">
      <nav class="bar bar-tab">
        <a class="tab-item" href="../01/home.jsp">
          <span class="icon icon-home"></span>
          <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="../02/issue.jsp">
          <span class="icon icon-edit"></span>
          <span class="tab-label">发贴</span>
        </a>
        <c:if test="${not empty user }">
          <a class="tab-item active goToTopA" href="${pageContext.request.contextPath }/myIssue?method=getMyIssueArticleList&uid=${user.uid}">
            <span class="icon icon-message goToTopIcon"></span>
            <span class="tab-label goToTopInfo">贴子</span>
          </a>
        </c:if>
        <c:if test="${empty user }">
          <a class="tab-item active goToTopA" href="../03/myIssue.jsp">
            <span class="icon icon-message goToTopIcon"></span>
            <span class="tab-label goToTopInfo">贴子</span>
          </a>
        </c:if>
        <a class="tab-item" href="../04/me.jsp">
          <span class="icon icon-me"></span>
          <span class="tab-label">我</span>
        </a>
      </nav>
    </footer>
  </div> <!-- end of .container -->

  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.js' charset='utf-8'></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
  <script type="text/javascript">
		  // 获取滚动的元素
		  var scrollArticle = document.getElementById("mainContent")
		  // 回到顶部函数
		  function myScrollToTopFn() {
		    // 获取滚动后的scrollTop值
		    var articleScrollTop = scrollArticle.scrollTop 
		    // 滚动一定距离后，显示回到顶部标识；否则复原
		    if ( articleScrollTop > 400 ) {
		      $('.goToTopIcon').removeClass('icon-message')
		      $('.goToTopIcon').addClass('icon-up')
		      $('.goToTopInfo').text('返回顶部')
		      $('.goToTopA').attr('href','#')   // 去掉相对路径
		      $('.goToTopA').on('click', function () {
		        // 平滑的滚回到顶部
		        scrollArticle.scrollTo({top:0,behavior:'smooth'})
		      })
		      $('.article-end').css('display','block') // 到底通知显示
		    } else {
		      $('.goToTopIcon').removeClass('icon-up')
		      $('.goToTopIcon').addClass('icon-message')
		      $('.goToTopInfo').text('贴子')
		      // reload current page
		      $('.goToTopA').attr('href','${pageContext.request.contextPath }/myIssue?method=getMyIssueArticleList&uid=${user.uid}') 
		      $('.article-end').css('display','none')
		    }
		  } // end of myScrollToTopFn()
		  
		  $(function(){
			  $('.deleteMyArticleBtn').on('click',function(){
				  var aid = $(this).next().val();//当前元素的下一个兄弟节点的值
				  var uid = $('.uid').val();
				  $('.confirmModal').css('display','block')
				  console.log(aid)
				  $('.cancelBtn').on('click',function(){
					  $('.confirmModal').css('display','none')				  
				  })
				  $('.confirmBtn').on('click',function(){
					  $('.confirmModal').css('display','none')				  
					  $.post(
					    "/LostAndFound/myIssue?method=handleDeleteArticleByAid",
					    {"aid":aid},
					    function(data){
					      if(data.success){
					        // 重新经过servlet跳转，再跳回来此页面
					        window.location.href="/LostAndFound/myIssue?method=getMyIssueArticleList&uid="+uid
					      }
					    },
					    "json"
					  );					  
				  })
			  })
		  })
		  // 当对数据进行修改后，使当前页面按F5或则Ctrl+R刷新，能经过servlet重新加载数据
	    document.onkeydown = function(event){
	    	e = event || window.event;
	    	if((e.ctrlKey&&e.keyCode==82)||e.keyCode==116){
	    		window.location.replace("/LostAndFound/myIssue?method=getMyIssueArticleList&uid="+$('.uid').val())
	    	}
	    }
  </script>
</body>
</html>